<script setup lang="jsx">
  import {watch,inject,ref,nextTick,reactive,computed} from 'vue'
import waybillTrayList from '@/api/abroad/waybillTrayList'
import { Message, Modal } from '@arco-design/web-vue'
import dicthelpApi from "@/api/dicthelpApi.js";
import {getDictData} from "@/utils/crud/dictNew.js";
import tool from '@/utils/tool'
const columnsDist = inject('columnsDist')
const span=ref(6)
const formRef=ref(null)
// 表单数据
const rules = {
    }
const formData = ref({
  id:'',
  send_list:[],
  tray_list:[],
  shipment:[], 
})
const columnsSendList = ref([
  {title: '标题', dataIndex: 'title',width:150,align:'center',hide:true,},
  {title: '服务类型', dataIndex: 'type',slotName: 'type',width:150,align:'center',hide:true,},
  {title: '目的地', dataIndex: 'address',width:180,slotName: 'address',align:'center',hide:true,},
  {title: '车辆', dataIndex: 'car_id',width:70,slotName: 'car_id',hide:true,},
  {title: '描述', dataIndex: 'remark',width:150,align:'center',hide:true,},
])
const columnsTrayList = ref([
  {title: '托盘编号', dataIndex: 'number',width:70,hide:true,},
  {title: '提单号/入仓号', dataIndex: 'tray.order.number',width:180,align:'center',hide:true,},
  {title: '柜号', dataIndex: 'tray.order.container_no',width:70,hide:true,},
  {title: '服务类型', dataIndex: 'service_type_id',slotName: 'service_type_id',width:150,align:'center',hide:true,},
  {title: 'ETA/入仓时间', dataIndex: 'tray.unpacking_at',width:150,align:'center',hide:true,},
])
const columnsShipment = ref([  
  {title: '入库日期', dataIndex: 'shipment.unpacking_at',width:150,align:'center',hide:true,},
  {title: '服务类型', dataIndex: 'service_type_id',slotName: 'service_type_id',width:150,align:'center',hide:true,},
  {title: '箱唛', dataIndex: 'shipment.shipment_no',width:100,align:'center',hide:true,},
  {title: '柜号', dataIndex: 'shipment.container_no',width:100,align:'center',hide:true,},
  {title: '箱数', dataIndex: 'count',width:100,align:'center',hide:true,},
  {title: '托盘（总）', dataIndex: 'shipment.tray_count_actual',width:100,align:'center',hide:true,},
  {title: '入库重量', dataIndex: 'shipment.weight',width:100,align:'center',hide:true,},
  {title: '库存CBM', dataIndex: 'shipment.volume',width:100,align:'center',hide:true,},
  {title: '库龄/天', dataIndex: 'shipment.age',width:100,align:'center',hide:true,},
]);
 //详情
 const infoGet=(id)=>{
  waybillTrayList.read(id).then(res => {
        // formData.value.tray_list=res.data.tray_list
        formData.value.shipment=res.data.shipment_list
        formData.value.send_list=res.data.send_list
      }) 
    }
const visible = ref(false)
  const onShow = async (value) => {
    visible.value = true
     //编辑
     if(value){
      infoGet(value.id) 
    }
    
  }
    const close = () => {
      formRef.value.resetFields();
      visible.value = false
    }
const onBeforeCancel=()=>{
  Modal.confirm({
        title: '确认关闭?',
        onOk: () => {
          close()
        },
      });
}
defineExpose({ onShow })
</script>

<template>
  <a-drawer v-model:visible="visible" v-if="visible" width="80%" @cancel="close">
        <template #title>
          <div >详情</div>
          </template>
          <a-form ref="formRef" :rules="rules" :model="formData" auto-label-width>
            <!-- <div class="form-top-main">
              <a-col :span="span">
              <a-form-item field="title" label="标题" validate-trigger="change">
                <a-input v-model="formData.send.title" disabled placeholder="请输入标题" />
              </a-form-item>
            </a-col>
            <a-col :span="span">
              <a-form-item field="type" label="服务类型"  validate-trigger="change">
                <a-select v-model="formData.send.type" disabled  :options="columnsDist.dicthelpApi_waybillServiceShipmentTypeList.data" :field-names="{ value: 'id', label: 'name' }"
                placeholder="请选择服务类型" allow-clear allow-search :virtual-list-props="{height:200}" /> 
              </a-form-item>
            </a-col>
            <a-col :span="span">
              <a-form-item field="address" label="目的地" validate-trigger="change">
                <a-select v-model="formData.send.address" disabled :options="columnsDist.dicthelpApi_addressChang.data" :field-names="{ value: 'value', label: 'label' }"
                placeholder="请选择目的地" allow-clear allow-search :virtual-list-props="{height:200}" /> 
              </a-form-item>
            </a-col>
            <a-col :span="span">
              <a-form-item label="车辆" validate-trigger="change">
                <a-select v-model="formData.send.car_id" disabled
                placeholder="请选择车辆" allow-clear allow-search>
                <a-option v-for="item in columnsDist.dicthelpApi_waybillCarList.data" :value="item.id" :key="item.id">{{item.car_number}}</a-option>     
              </a-select> 
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="描述" validate-trigger="change">
                <a-textarea v-model="formData.send.remark" disabled placeholder="请输入描述" />
              </a-form-item>
            </a-col>  

          </div> -->
          <a-tabs default-active-key="1">
            <a-tab-pane key="1" title="运单">   
              <a-table ref="shipmentTableRef"  row-key="shipment_id" :columns="columnsShipment" :data="formData.shipment" :bordered="false"  size="mini" column-resizable :pagination="false">
                  <template #service_type_id="{ record }">{{getDictData('attrApi','dicthelpApi_waybillServiceShipmentTypeList',record.shipment.service_type_id,3,columnsDist) }}</template>                 
              </a-table>
            </a-tab-pane>
            <a-tab-pane key="2" title="出货单">   
              <a-table ref="sendTableRef"  row-key="id" :columns="columnsSendList" :data="formData.send_list" :bordered="false"  size="mini" column-resizable :pagination="false">
                  <template #type="{ record }">{{getDictData('attrApi','dicthelpApi_waybillServiceShipmentTypeList',record.type,3,columnsDist) }}</template>  
                  <template #address="{ record }">{{getDictData('attrApi','dicthelpApi_addressChang',record.address,1,columnsDist) }}</template>  
                  <template #car_id="{ record }">{{getDictData('attrApi','dicthelpApi_waybillCarList',record.car_id,3,columnsDist) }}</template>  
              </a-table>
            </a-tab-pane>
            </a-tabs>
        </a-form>
        <template #footer> 
          <div style="display: flex; justify-content: space-between;align-items: center;">
            <div style="color: rgb(50 193 148);">
              <!-- tips：先选择"服务项目"后在操作明细,请按要求填写(导入)单据信息 -->
            </div>
            <div>
              <a-button @click="visible = false" style="margin-right: 20px;">关闭</a-button>
              <!-- <a-button type="primary" @click="handleBeforeOk(formRef)">
                保存
              </a-button> -->
            </div>
          </div>       
        </template>
      </a-drawer>
</template>
<style>
   .form-top-main{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
   }
   .tab-main{
    display: flex;
    align-items: center;
    margin: 10px 0;
   }
   .tab-main .arco-form-item{
    margin-bottom: 0;
   }
   .tab-main .arco-switch{
    margin-right: 20px;
   }
</style>